<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen">
                玩家: 小白 分数: 1860</br>
                比赛场次: 23 获胜场次: 18
            </div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;

        window.onbeforeunload = function() {
            ws_hdl.close();
        }   
        var button_flag = "stop";
        var be = document.getElementById("match-button");//be-button element
        be.onclick = function() {
            if (button_flag == "stop") {
                // 1.没有匹配状态下点击按钮，发送对战匹配请求
                var req_json = {
                    optype: "match_start"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
            else {
                // 2.匹配状态下点击按钮，发送停止对战匹配请求
                var req_json = {
                    optype: "match_stop"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
        }
        function get_user_info() {
            $.ajax({
                url: "/info",
                type: "get",
                success: function(ret) {
                    var info_html = "<p>" + "用户: " + ret.username + " 分数: " + ret.score
                      + "</br>" + "比赛场次: " + ret.total_count + " 获胜场次: " + ret.win_count + "</p>";
                    var screen_dev = document.getElementById("screen");
                    screen_dev.innerHTML = info_html;

                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = ws_onopen;
                    ws_hdl.onclose = ws_onclose;
                    ws_hdl.onerror = ws_onerror;
                    ws_hdl.onmessage = ws_onmessage;
                },
                error: function(xhr) {
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            })
        }
        function ws_onopen() {
            console.log("ws_open");    
        }
        function ws_onclose() {
            console.log("ws_close");    
            
        }
        function ws_onerror() {
            console.log("ws_err");    
            
        }
        function ws_onmessage(event) {
            // 反序列化响应信息
            // 根据响应信息进行对应的处理
            // a.为false，匹配请求或停止匹配请求服务端响应失败，重新登录
            // b.匹配请求的响应，切换为正在匹配
            // c.停止匹配的响应，切换到开始匹配
            var resp = JSON.parse(event.data);
            if (resp.result == false) {
                location.replace("/login.html");
                return;
            }
            if (resp.optype == "hall_ready") {
                alert("游戏大厅长连接已建立");
            }
            else if (resp.optype == "match_success") {
                alert("对战匹配成功，即将进入游戏房间");
                location.replace("/game_room.html");
            }
            else if(resp.optype == "match_start") {
                console.log("玩家加入匹配队列");
                button_flag = "start";
                be.innerHTML = "正在匹配中... 点击停止匹配";
                return;
            }
            else if (resp.optype == "match_stop") {
                console.log("玩家离开匹配队列");
                button_flag = "stop";
                be.innerHTML = "点击->开始匹配";
                return;
            }
            else {
                location.replace("/login.html");
            }
        }
        get_user_info();
    </script>
    <script src="https://unpkg.com/oh-my-live2d@latest"></script>
<script>
  OML2D.loadOml2d({
    models: [
      {
        path: 'https://model.oml2d.com/HK416-1-normal/model.json',
        position: [0, 60],
        scale: 0.08,
        stageStyle: {
          height: 450
        }
      }
    ]
  });
</script>
</body>
</html>
